/* eslint react/no-string-refs:0 */
import React, { Component } from "react";
import { withRouter, Link } from "react-router-dom";
import Localstorage from "./../../../../utils/Localstorage.js";
import { login } from "./../../../../httpserver/api/login.js";
import { Input, Button, Checkbox, Grid, Feedback } from "@icedesign/base";
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError
} from "@icedesign/form-binder";
import IceIcon from "@icedesign/icon";
import "./UserLogin.scss";

const { Row, Col } = Grid;
const Toast = Feedback.toast;

// 寻找背景图片可以从 https://unsplash.com/ 寻找
const backgroundImage =
  "https://images.unsplash.com/photo-1531060280746-79452e9ec2a1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=53e1385897e910c5d5c7255817d2282e&auto=format&fit=crop&w=1504&q=80";

@withRouter
export default class UserLogin extends Component {
  static displayName = "UserLogin";

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      // value: {
      //   username: undefined,
      //   password: undefined,
      //   checkbox: false
      // }
    };
  }
  componentWillMount() {
    if (Localstorage.take("isLogin")) {
      this.props.history.push("/");
    }
  }
  formChange = value => {
    this.setState({
      value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log("errors", errors);
        return;
      }
      console.log("values:", values);
      let obj = {
        username: values.username,
        password: values.password,
        role: 1 //办公室
      };
      console.log(obj);
      login(obj)
        .then(res => {
          if (res.status === 1) {
            // 保存登录状态
            Localstorage.exist("isLogin", true);
            this.props.history.push("/");
          } else {
            Toast.show({
              type: "prompt",
              size: "large",
              style: {
                background: "rgb(48, 128, 254)"
              },
              content: `账户 / 密码有误，请重试！`
            });
          }
        })
        .catch(err => {
          Toast.show({
            type: "prompt",
            size: "large",
            style: {
              background: "rgb(48, 128, 254)"
            },
            content: `账户 / 密码有误，请重试！`
          });
        });
      // Localstorage.exist("isLogin", true);
      // this.props.history.push("/");
    });
  };
  // 点击忘记密码的操作
  forgetPassword() {
    Toast.show({
      type: "prompt",
      size: "large",
      style: {
        background: "rgb(48, 128, 254)"
      },
      content: `该功能还没开放，再等等吧   ^_^`
    });
  }
  render() {
    return (
      <div style={styles.userLogin} className="user-login">
        <div
          style={{
            ...styles.userLoginBg,
            backgroundImage: `url(${backgroundImage})`
          }}
        />
        <div style={styles.contentWrapper} className="content-wrapper">
          <h2 style={styles.slogan} className="slogan">
            欢迎使用 <br /> 恒逸e家食堂管理系统
          </h2>
          <div style={styles.formContainer}>
            <h4 style={styles.formTitle}>登录</h4>
            <IceFormBinderWrapper
              value={this.state.value}
              onChange={this.formChange}
              ref="form"
            >
              <div style={styles.formItems}>
                <Row style={styles.formItem}>
                  <Col>
                    <IceIcon
                      type="person"
                      size="small"
                      style={styles.inputIcon}
                    />
                    <IceFormBinder name="username" required message="必填">
                      <Input maxLength={20} placeholder="会员名/邮箱/手机号" />
                    </IceFormBinder>
                  </Col>
                  <Col>
                    <IceFormError name="username" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col>
                    <IceIcon
                      type="lock"
                      size="small"
                      style={styles.inputIcon}
                    />
                    <IceFormBinder name="password" required message="必填">
                      <Input htmlType="password" placeholder="密码" />
                    </IceFormBinder>
                  </Col>
                  <Col>
                    <IceFormError name="password" />
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Col>
                    <IceFormBinder name="checkbox">
                      <Checkbox style={styles.checkbox}>记住账号</Checkbox>
                    </IceFormBinder>
                  </Col>
                </Row>

                <Row style={styles.formItem}>
                  <Button
                    type="primary"
                    onClick={this.handleSubmit}
                    style={styles.submitBtn}
                  >
                    登 录
                  </Button>
                </Row>

                <Row className="tips" style={styles.tips}>
                  <Link to="/Registers">立即注册</Link>
                  <span
                    style={styles.link}
                    onClick={() => {
                      this.forgetPassword();
                    }}
                  >
                    忘记密码
                  </span>
                </Row>
              </div>
            </IceFormBinderWrapper>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  userLogin: {
    position: "relative",
    height: "100vh"
  },
  userLoginBg: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundSize: "cover"
  },
  formContainer: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "column",
    padding: "30px 40px",
    background: "#fff",
    borderRadius: "6px",
    boxShadow: "1px 1px 2px #eee"
  },
  formItem: {
    position: "relative",
    marginBottom: "25px",
    flexDirection: "column"
  },
  formTitle: {
    margin: "0 0 20px",
    textAlign: "center",
    color: "#3080fe",
    letterSpacing: "12px"
  },
  inputIcon: {
    position: "absolute",
    left: "0px",
    top: "3px",
    color: "#999"
  },
  submitBtn: {
    width: "240px",
    background: "#3080fe",
    borderRadius: "28px"
  },
  checkbox: {
    marginLeft: "5px"
  },
  tips: {
    width: "100%",
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-between"
    // background: "red"
    // textAlign: "center"
  },
  link: {
    color: "#999",
    textDecoration: "none",
    fontSize: "13px",
    cursor: "pointer"
  },
  line: {
    color: "#dcd6d6",
    margin: "0 8px"
  }
};
